<template>
	<!-- 首页 -->
	<view class="xyyf-home" :class="{ 'no-scroll': isPopupOpen }">
		<!-- 登录提示弹出框 -->
		<uni-popup ref="loginPopup" type="center" :mask-click="false">
			<view class="login-popup-content">
				<view class="login-popup-header">
					<view class="login-popup-title">温馨提示</view>
					<view class="login-popup-close" @click="closeLoginPopup">×</view>
				</view>
				<view class="login-popup-text">
					为了更好的服务体验，请先登录后再使用相关功能
				</view>
				<view class="login-popup-buttons">
					<view class="login-popup-btn cancel-btn" @click="closeLoginPopup">稍后再说</view>
					<view class="login-popup-btn login-btn" @click="goToLogin">立即登录</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 添加弹出框 -->
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="popup-content">
				<view class="popup-title">温馨提示</view>
				<view class="popup-text">
					<view class="text-item">
						1、本公司仅对该等展示的发布信息进行表面审查（即本公司仅对展示的发布信息与信息发布方提供的信息的内容、形式的一致性负责），不对展示、发布信息的内容的合法、真实、准确、完整及交易资金的来源、交易目的进行独立审核及作出任何承诺、保证及担保，本公司也不承担因此引致的任何责任及/或任何连带责任，您应依已之独立判断作出决策。
					</view>
					<view class="text-item">2、资料对接建议屏蔽客户电话和名字。</view>
				</view>
				<view class="popup-btn" @click="closePopup">我知道了</view>
			</view>
		</uni-popup>
		<view class="content">
			<!-- 只在非加载状态下显示内容 -->
			<template v-if="!loading">
				<!-- 搜索框 -->
			<!-- 	<view class="search-container">
					<view v-if="!isFocus" class="address">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/address_black.png"
							mode="widthFix" class="address_black"></image>
						<uni-data-picker class="uni-data-picker" :clear-icon="false" :localdata="items" :value="address"
							placeholder="全国" :level="2" @change="onAddress" @nodeclick="onnodeclick">
							{{ address }}
						</uni-data-picker>
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/arrow_dwon.png"
							mode="widthFix" class="arrow_dwon"></image>
					</view>
					<view class="search-box" :class="{ 'search-box-focus': isFocus }">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_search.png"
							mode="widthFix" class="search-icon"></image>
						<input ref="searchInput" class="search-input" placeholder="精准找人搜一搜"
							placeholder-style="color:#AC6C17;opacity:0.8" @focus="handleFocus" @blur="handleBlur"
							v-model="searchText" @confirm="handleSearchConfirm" />
					</view>
					<view v-if="isFocus" class="cancel" @click="cancelClick()">取消</view>
				</view> -->

				<!-- 广告位 -->
				<view class="advertising">
					<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="500">
						<swiper-item v-for="(item, index) in advertising" :key="index">
							<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 公告 -->
				<view v-if="noticeInfo !== ''" class="announcement">
					<view class="announcement-lf">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/notice.png"
							mode="widthFix" class="notice"></image>
						<view class="notice-text">公告</view>
					</view>
					<view class="scroll-container">
						<view class="scroll-text" :class="{ 'scroll-animation': shouldScroll }" ref="scrollText">
							{{ noticeInfo }}
						</view>
					</view>
				</view>
				<!-- 菜单列表 -->
				<view class="menu-list-w">
					<view class="public-title">
						<view class="title">功能模块</view>
					</view>
					<view class="menu-list">
						<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
							<image :src="item.img" mode="widthFix"></image>
							<view class="text">{{ item.text }}</view>
						</view>
					</view>
				</view>
				<!-- 产品库 -->
				<view v-if="bqShow == 'true'" class="home-block">
					<view class="public-title">
						<view class="title">产品库</view>
						<view class="more" @click="navigateTo('/pages/knowledge-base/knowledge-base')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<cpk v-if="cpkData.length > 0" :cpkData="cpkData" @show-login-popup="showLoginPopup"></cpk>
					<view v-else class="no-data">暂无数据</view>
				</view>

				<!-- 人脉资源 -->
			<!-- 	<view class="home-block">
					<view class="public-title">
						<view class="title">人脉资源</view>
						<view class="more" @click="navigateTo('/pages/rmzy/rmzy')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<rmzy v-if="rmzyData.length > 0" :rmzyData="rmzyData" @show-login-popup="showLoginPopup"></rmzy>
					<view v-else class="no-data">暂无数据</view>
				</view> -->

				<!-- 需求广场 -->
				<!-- <view class="home-block">
					<view class="public-title">
						<view class="title">需求广场</view>
						<view class="more" @click="navigateTo('/pages/khzy/khzy')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<khzy v-if="khzyData.length > 0" :khzyData="khzyData" @show-login-popup="showLoginPopup"></khzy>
					<view v-else class="no-data">暂无数据</view>
				</view> -->
				<!-- 产品资源 -->
				<!-- <view class="home-block">
					<view class="public-title">
						<view class="title">产品资源</view>
						<view class="more" @click="navigateTo('/pages/cpzy/cpzy')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<cpzy v-if="cpzyData.length > 0" :cpzyData="cpzyData" @show-login-popup="showLoginPopup"></cpzy>
					<view v-else class="no-data">暂无数据</view>
				</view> -->
				<!-- 行业服务 -->
				<!-- <view class="home-block">
					<view class="public-title">
						<view class="title">行业服务</view>
						<view class="more" @click="navigateTo('/pages/hyfw/hyfw')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<hyfw v-if="hyfwData.length > 0" :cpzyData="hyfwData" @show-login-popup="showLoginPopup"></hyfw>
					<view v-else class="no-data">暂无数据</view>
				</view> -->
				<!-- 培训资源 -->
				<!-- <view class="home-block">
					<view class="public-title">
						<view class="title">培训资源</view>
						<view class="more" @click="navigateTo('/pages/pxzy/pxzy')">查看更多<uni-icons type="right" size="12"
								color="#000"></uni-icons> </view>
					</view>
					<pxzy v-if="pxzyData.length > 0" :pxzyData="pxzyData" @show-login-popup="showLoginPopup"></pxzy>
					<view v-else class="no-data">暂无数据</view>
				</view> -->
				<!-- 论坛 -->
			<!-- 	<view class="home-block">
					<view class="public-title">
						<view class="title">论坛</view>
						<view class="more" @click="navigateTo('/pages/luntan/luntan')">查看更多<uni-icons type="right"
								size="12" color="#000"></uni-icons> </view>
					</view>
					<lun-tan v-if="ltData.length > 0" isltIndex="true" :ltData="ltData" @refresh="getLt" @show-login-popup="showLoginPopup"></lun-tan>
					<view v-else class="no-data">暂无数据</view>
				</view> -->
			</template>
			<!-- 加载动画放在最后 -->
			<uni-load-more v-if="loading" status="loading"></uni-load-more>
		</view>
		<!-- 底部菜单 -->
		<tab-bar :selected='0' @tab-click="handleTabClick"></tab-bar>
	</view>
</template>

<script>
	import PcaCode from '../../api/pca-code.json'
	import TabBar from '../../components/TabBar.vue';
	import Cpk from '../../components/Cpk.vue'; // 产品库
	import Rmzy from '../../components/Rmzy.vue'; // 人脉资源
	import Khzy from '../../components/Khzy.vue'; // 需求广场
	import Cpzy from '../../components/Cpzy.vue'; // 产品资源
	import Hyfw from '../../components/Hyfw.vue'; // 行业服务
	import Pxzy from '../../components/Pxzy.vue'; // 培训资源
	import LunTan from '../../components/LunTan.vue'; // 论坛
	import {
		parseDate
	} from '@/utils/date.js';
	export default {
		components: {
			TabBar,
			Cpk,
			Rmzy,
			Khzy,
			Cpzy,
			Hyfw,
			Pxzy,
			LunTan
		},
		data() {
			return {
				address: '全国', // 地址
				items: [],
				isFocus: false, // 是否聚焦
				searchText: '', // 搜索框文本
				advertising: [], // 广告
				noticeInfo: '', // 公告
				menuList: [{
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_cpk.png',
					text: '产品库',
					url: '/pages/knowledge-base/knowledge-base'
				},{
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_emzy.png',
					text: '人脉资源',
					url: '/pages/rmzy/rmzy'
				}, {
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_khzy.png',
					text: '需求广场',
					url: '/pages/khzy/khzy'
				}, {
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_cpzy.png',
					text: '产品资源',
					url: '/pages/cpzy/cpzy'
				}, {
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_hyfw.png',
					text: '行业服务',
					url: '/pages/hyfw/hyfw'
				}, {
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_pxzy.png',
					text: '培训资源',
					url: '/pages/pxzy/pxzy'
				}, {
					img: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_lt.png',
					text: '论坛',
					url: '/pages/luntan/luntan'
				}],
				// 产品库
				cpkData: [],
				// 人脉资源
				rmzyData: [],
				// 需求广场
				khzyData: [],
				// 产品资源
				cpzyData: [],
				// 行业服务
				hyfwData: [],
				// 培训资源
				pxzyData: [],
				// 论坛
				ltData: [],
				loading: true, // 添加loading状态
				isPopupOpen: false, // 添加弹出框状态
				shouldScroll: false,
				containerWidth: 0,
				textWidth: 0,
				bqShow: true
			}
		},
		computed: {
			// 从 Vuex 获取登录状态和用户信息
			isLoggedIn() {
				return this.$store.state.user.isLoggedIn;
			}
		},
		async onLoad() {
			this.init()
			this.getBannerList()
			try {
				// 使用Promise.all等待所有请求完成
				await Promise.all([
					this.getShowProductList(), // 根据版本号判断显示隐藏
					this.getNoticeeList(), // 获取公告列表
					this.getCpk(), // 获取产品库
					// this.getMenberInfo(), // 获取会员用户-人脉资源
					// this.getKf(), // 获取客户列表
					// this.getLt(), // 获取论坛信息列表
					// this.getCpzy(), // 产品资源
					// this.getPxjg(), // 培训机构
					// this.getHyfw() // 行业服务
				])
			} catch (error) {
				console.error('数据加载失败:', error)
			} finally {
				this.loading = false // 所有数据加载完成后关闭loading
				// 只有登录用户才显示弹出框
				if (this.isLoggedIn) {
					this.$nextTick(() => {
						this.$refs.popup.open();
					});
				}
			}
			// 显示分享按钮
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage() {
			return {
				title: '百万助贷人资源对接价值之圈',
				path: '/pages/index/index'
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initScroll();
			});
		},
		methods: {
			//  根据版本号判断显示隐藏
		async getShowProductList() {
			try {
	
				const res = await this.$api.getShowProductList()
				this.bqShow = res.data
				if (this.bqShow == 'false') {
					this.menuList = this.menuList.filter(item => 
						item.text !== '产品库' && item.text !== '产品资源' && item.text !== '人脉资源' && item.text !== '行业服务' && item.text !== '培训资源'
					);
				} else {
					console.log('条件不满足，this.bqShow的值是:', this.bqShow)
				}
			} catch (error) {
				console.error('获取版本控制信息失败:', error);
				this.bqShow = true; // 默认显示
			}
		},
			init() {
				// 初始化地址数据，添加"全国"选项
				const allRegion = {
					text: '全国',
					value: '全国',
					children: []
				};
				this.items = [
					allRegion,
					...PcaCode.map(province => ({
						...province,
						children: province.children.map(city => ({
							...city,
							children: [] // 清空区级数据
						}))
					}))
				];
			},
			// 初始化滚动
			initScroll() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-container').boundingClientRect();
				query.select('.scroll-text').boundingClientRect();
				query.exec((res) => {
					if (res[0] && res[1]) {
						this.containerWidth = res[0].width;
						this.textWidth = res[1].width;
						this.shouldScroll = this.textWidth > this.containerWidth;
						console.log('容器宽度:', this.containerWidth, '文字宽度:', this.textWidth, '是否需要滚动:', this
							.shouldScroll);
					}
				});
			},
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					// 查找zsggw等于"人脉资源"的项
					const targetBanner = res.data.find(item => item.zsggw === '首页')
					// 如果找到匹配项，则使用其tp值，否则保持默认值
					this.advertising = targetBanner.tpList
				}
			},
			// 获取公告列表
			async getNoticeeList() {
				let data = {
					key: ''
				}
				try {
					const res = await this.$api.getNoticeeList(data)
					console.log('公告列表:', res)
					if (res.succ) {
						// 过滤掉空值和undefined
						this.noticeInfo = res.data.map(item => item.noticeInfo).join('，')
						// 延迟检测文字是否超出
						setTimeout(() => {
							this.initScroll();
						}, 500);
					} else {
						this.noticeInfo = ''
					}
				} catch (error) {
					console.error('获取公告列表失败:', error)
				}
			},
			// 获取产品库
			async getCpk() {
				let data = {
					 pageNum: 1,
					 pageSize: 10,
					 params: {
						 onlineFlag: 1
					 }
				}
				try {
					const res = await this.$api.getCpkData(data)
					if (res.succ) {
						this.cpkData = res.data.list
						console.log('res.data.list', res.data.list)
					}
				} catch (error) {
					console.error('获取人脉资源失败:', error)
					this.rmzyData = []
				}
			},
			// 获取会员用户-人脉资源
			async getMenberInfo() {
				let data = {
					key: ''
				}
				try {
					const res = await this.$api.getMenberInfo(data)
					if (res.succ) {
						this.rmzyData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item =>
								item.realName?.toLowerCase().includes(this.searchText.toLowerCase()) &&
								item.avatar !== null &&
								item.workYear !== null
							).slice(0, 2)
					}
				} catch (error) {
					console.error('获取人脉资源失败:', error)
					this.rmzyData = []
				}
			},
			// 获取客户列表
			async getKf() {
				let data = {
					words: ''
				}
				try {
					const res = await this.$api.getKfList(data)
					if (res.succ) {
						this.khzyData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item => {
								if (!item || !item.member) {
									return false;
								}
								const realName = item.member.realName;
								return realName &&
									realName.toLowerCase().includes(this.searchText.toLowerCase()) &&
									item.releaseStatus === '展示中';
							}).slice(0, 2)
					}
				} catch (error) {
					console.error('获取客户列表失败:', error)
					this.khzyData = []
				}
			},
			// 获取产品资源
			async getCpzy() {
				let data = {
					fwsfl: '产品资源',
					status: '审核通过'
				}
				try {
					const res = await this.$api.getSwsList(data)
					if (res.succ) {
						this.cpzyData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item =>
								item.companyName.toLowerCase().includes(this.searchText.toLowerCase())
							).slice(0, 2)
					}
				} catch (error) {
					console.error('获取产品资源失败:', error)
					this.cpzyData = []
				}
			},
			// 获取行业服务
			async getHyfw() {
				let data = {
					fwsfl: '行业服务',
					status: '审核通过'
				}
				try {
					const res = await this.$api.getSwsList(data)
					if (res.succ) {
						this.hyfwData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item =>
								item.companyName.toLowerCase().includes(this.searchText.toLowerCase())
							).slice(0, 2)
					}
				} catch (error) {
					console.error('获取行业服务失败:', error)
					this.hyfwData = []
				}
			},
			// 获取培训机构
			async getPxjg() {
				let data = {
					fwsfl: '培训机构',
					status: '审核通过'
				}
				try {
					const res = await this.$api.getSwsList(data)
					if (res.succ) {
						this.pxzyData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item =>
								item.companyName.toLowerCase().includes(this.searchText.toLowerCase())
							)
					}
				} catch (error) {
					console.error('获取培训机构失败:', error)
					this.pxzyData = []
				}
			},
			// 获取论坛信息列表
			async getLt() {
				try {
					let data = {
						releaseStatus: '展示中'
					}
					const res = await this.$api.getltList(data)
					if (res.succ) {
						this.ltData = res.data
							.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime())
							.filter(item => {
								if (!item || !item.member) {
									return false;
								}
								const realName = item.member.realName;
								return realName && realName.toLowerCase().includes(this.searchText.toLowerCase());
							}).slice(0, 2)
					}
				} catch (error) {
					console.error('获取论坛列表失败:', error)
					this.ltData = []
				}
			},
			// 地址选择
			async onAddress(e) {
				const selectedItems = e.detail.value; // 所有选中项对象数组
				// 提取最后一级的 value
				const lastLevelValue = selectedItems[selectedItems.length - 1]?.text || '全国';
				this.address = lastLevelValue;

				// 开始加载
				this.loading = true;
				try {
					// 获取所有数据
					const [menberRes, kfRes, ltRes] = await Promise.all([
						this.$api.getMenberInfo({
							key: ''
						}),
						this.$api.getKfList({
							words: ''
						}),
						this.$api.getltList()
					]);

					// 筛选人脉资源数据
					if (menberRes.succ) {
						this.rmzyData = menberRes.data
							.filter(item => {
								// 如果地址是"全国"或者未选择地址，显示所有数据
								if (this.address === '全国') return true;
								// 否则匹配城市
								return item.city === this.address;
							})
							.filter(item => {
								// 同时考虑搜索关键词
								if (!this.searchText) return true;
								return item.realName?.toLowerCase().includes(this.searchText.toLowerCase());
							})
							.slice(0, 2);
					}

					// 筛选需求广场数据
					if (kfRes.succ) {
						this.khzyData = kfRes.data
							.filter(item => {
								if (!item || !item.member) return false;
								if (this.address === '全国') return true;
								return item.member.city === this.address;
							})
							.filter(item => {
								if (!this.searchText) return true;
								return item.member.realName?.toLowerCase().includes(this.searchText.toLowerCase());
							})
							.slice(0, 2);
					}

					// 筛选论坛数据
					if (ltRes.succ) {
						this.ltData = ltRes.data
							.filter(item => {
								if (!item || !item.member) return false;
								if (this.address === '全国') return true;
								return item.member.city === this.address;
							})
							.filter(item => {
								if (!this.searchText) return true;
								return item.member.realName?.toLowerCase().includes(this.searchText.toLowerCase());
							})
							.slice(0, 2);
					}

					// 其他资源数据保持不变
					await Promise.all([
						this.getCpzy(),
						this.getPxjg(),
						this.getHyfw()
					]);

				} catch (error) {
					console.error('地址筛选数据加载失败:', error);
				} finally {
					this.loading = false;
				}
			},
			// 地址取消
			onnodeclick(node) {

			},
			//  菜单跳转
			menuClick(i) {
				// 未登录用户也可以进入菜单页面
				uni.navigateTo({
					url: i.url
				})
			},
			// 搜索框聚焦
			handleFocus() {
				this.isFocus = true;
			},
			// 搜索框失焦
			async handleBlur() {
				if (!this.searchText) {
					this.isFocus = false;
					// 当搜索框清空时重新加载所有数据
					this.loading = true;
					try {
						await Promise.all([
							this.getMenberInfo(),
							this.getKf(),
							this.getLt(),
							this.getCpzy(),
							this.getPxjg(),
							this.getHyfw()
						]);
					} catch (error) {
						console.error('重新加载数据失败:', error);
					} finally {
						this.loading = false;
					}
				}
			},
			// 取消
			async cancelClick() {
				this.isFocus = false;
				this.searchText = '';
				// 重新加载所有数据
				this.loading = true;
				try {
					await Promise.all([
						this.getMenberInfo(),
						this.getKf(),
						this.getLt(),
						this.getCpzy(),
						this.getPxjg(),
						this.getHyfw()
					]);
				} catch (error) {
					console.error('重新加载数据失败:', error);
				} finally {
					this.loading = false;
				}
			},
			// 新增确认键事件处理
			async handleSearchConfirm() {
				if (this.searchText.trim()) {
					this.loading = true; // 开始加载
					try {
						// 重新获取所有数据
						await Promise.all([
							this.getMenberInfo(),
							this.getKf(),
							this.getCpzy(),
							this.getHyfw(),
							this.getPxjg(),
							this.getLt()
						]);
					} catch (error) {
						console.error('搜索数据加载失败:', error);
					} finally {
						this.loading = false;
					}
				}
			},
			// 新增搜索地址方法
			searchAddress(keyword) {

			},
			// 格式化联系方式
			formatContact(contact) {
				if (contact.length < 7) return contact;
				return contact.slice(0, 3) + '****' + contact.slice(-4);
			},
			// 格式化微信号
			formatContactId(contact) {
				return contact.slice(0, 3) + '****' + contact.slice(-2);
			},
			// 点击查看全部联系方式和微信号
			eyeClick(i) {
				i.showFullContact = !i.showFullContact;
			},
			// 页面跳转
			navigateTo(toUrl) {
				// 未登录用户也可以进入二级页面
				uni.navigateTo({
					url: toUrl
				})
			},
			// 关闭弹出框
			closePopup() {
				this.$refs.popup.close();
				this.isPopupOpen = false;
			},
			// 打开弹出框
			openPopup() {
				this.isPopupOpen = true;
			},
			sortData(data) {
				return data.sort((a, b) => parseDate(b.createTime).getTime() - parseDate(a.createTime).getTime());
			},
			// 处理底部菜单点击
			handleTabClick(index) {
				// 显示登录提示弹窗
				this.$refs.loginPopup.open();
			},
			// 关闭登录提示弹出框
			closeLoginPopup() {
				this.$refs.loginPopup.close();
			},
			// 跳转到登录页面
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			// 显示登录提示弹窗
			showLoginPopup() {
				this.$refs.loginPopup.open();
			}
		},
		watch: {
			noticeInfo: {
				handler() {
					this.$nextTick(() => {
						this.initScroll();
					});
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less">
	.xyyf-home {
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative; // 添加相对定位
		background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 500rpx);

		&.no-scroll {
			overflow: hidden;
			height: 100vh;
		}

		// 添加弹出框样式
		.popup-content {
			background-color: #FFFFFF;
			border-radius: 24rpx;
			width: 600rpx;
			padding: 40rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			position: relative; // 添加相对定位
			z-index: 999; // 确保弹出框在最上层

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.popup-text {
				.text-item {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					margin-bottom: 20rpx;
				}
			}

			.popup-btn {
				margin-top: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #9D7029;
				border-radius: 44rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
				}
			}
		}

		// 登录提示弹出框样式
		.login-popup-content {
			background-color: #FFFFFF;
			border-radius: 24rpx;
			width: 600rpx;
			padding: 40rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			position: relative;
			z-index: 999;

			.login-popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.login-popup-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.login-popup-close {
					font-size: 40rpx;
					color: #999;
					padding: 10rpx;
					cursor: pointer;
					transition: color 0.3s ease;
					
					&:hover {
						color: #666;
					}
				}
			}

			.login-popup-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 40rpx;
				text-align: center;
			}

			.login-popup-buttons {
				display: flex;
				justify-content: space-between;
				gap: 20rpx;

				.login-popup-btn {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					transition: all 0.3s ease;
					cursor: pointer;

					&.cancel-btn {
						background: #F5F5F5;
						color: #666;
						border: 1rpx solid #E0E0E0;
						
						&:active {
							background: #E8E8E8;
						}
					}

					&.login-btn {
						background: linear-gradient(135deg, #9D7029 0%, #AC6C17 100%);
						color: #FFFFFF;
						box-shadow: 0 4rpx 12rpx rgba(157, 112, 41, 0.3);
						
						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(157, 112, 41, 0.3);
						}
					}

					&:active {
						transform: scale(0.98);
					}
				}
			}
		}

		.content-bg {
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 804rpx;
			background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.content {
			z-index: 2;
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: auto;

			//  搜索框
			.search-container {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.address {
					height: 73rpx;
					padding-right: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #333;
					font-size: 28rpx;

					.address_black {
						width: 18.19rpx;
						height: 21.99rpx;
						margin-right: 10rpx;
					}

					.uni-data-picker {
						color: #333 !important;
						font-size: 30rpx !important;
					}

					.arrow_dwon {
						width: 18rpx;
						height: 10rpx;
						margin-left: 10rpx;
					}

					.input-value {
						z-index: 2;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						opacity: 0;
					}

					.placeholder,
					.text-color {
						opacity: 0;
					}

					.arrow-area {
						display: none;
					}

				}

				.search-box {
					display: flex;
					align-items: center;
					flex: 1;
					height: 72rpx;
					padding: 0 20rpx;
					background-color: rgba(245, 192, 136, .31);
					border: 1rpx solid rgba(245, 192, 136, .31);
					border-radius: 10rpx;
					transition: all 0.3s ease;

					&.search-box-focus {
						border: 1rpx solid rgba(245, 192, 136, .6);
					}

					.search-icon {
						margin-right: 10rpx;
						width: 28.38rpx;
						height: 28.38rpx;
					}

					.search-input {
						flex: 1;
						height: 100%;
						margin-left: 10rpx;
						font-size: 30rpx;
						color: #AC6C17;
						placeholder-color: #AC6C17;
						placeholder-opacity: 0.8;
					}

				}

				.cancel {
					font-size: 30rpx;
					color: #000;
					padding-left: 30rpx;
				}
			}

			// 公告
			.announcement {
				margin: 30rpx 30rpx 0;
				display: flex;
				height: 88rpx;
				align-items: center;
				position: relative;
				background-color: rgba(245, 192, 136, .31);
				border-radius: 10rpx;

				.announcement-lf {
					display: flex;
					margin-left: 20rpx;
					align-items: center;

					.notice {
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
						flex-shrink: 0;
					}

					.notice-text {
						position: relative;
						top: 2rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: bold;
						font-size: 32rpx;
						color: #AC6C17;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						text-transform: none
					}
				}

				.scroll-container {
					flex: 1;
					overflow: hidden;
					position: relative;
					height: 88rpx;
					display: flex;
					align-items: center;
					margin: 0 20rpx;
				}

				.scroll-text {
					position: relative;
					top: 4rpx;
					color: #AC6C17;
					font-size: 30rpx;
					white-space: nowrap;
					display: inline-block;
					padding-left: 0;
					width: auto;
				}

				.scroll-animation {
					animation: scrollText 20s linear infinite;
					display: inline-block;
					width: auto;
				}

				@keyframes scrollText {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-100%);
					}
				}
			}

			// 广告位
			.advertising {
				margin: 30rpx 30rpx 0;
				padding: 0;
				border-radius: 12rpx;

				.ad-swiper {
					width: 100%;
					height: 300rpx;
					border-radius: 12rpx;
				}

				.ad-swiper swiper-item {
					width: 100%;
					height: 100%;
				}

				.ad-swiper image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			// 菜单列表
			.menu-list-w {
				margin: 30rpx;
				// padding: 0 30rpx;
				border-radius: 10rpx;
				background-color: rgba(245, 192, 136, .31);
			}

			.menu-list {
				padding: 20rpx 0 10rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				width: 100%;
				margin-top: 20rpx;

				.menu-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					padding: 0 10rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 12rpx;
						border-radius: 100%;
					}

					.text {
						font-size: 24rpx;
						color: #AC6C17;
						text-align: center;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.no-data {
				text-align: center;
				padding: 30rpx 0;
				color: #999;
				font-size: 28rpx;
				background: #f8f8f8;
				margin: 20rpx 30rpx;
				border-radius: 12rpx;
			}
			
			.version-info {
				text-align: center;
				padding: 10rpx 0;
				color: #999;
				font-size: 24rpx;
				margin: 0 30rpx;
				opacity: 0.6;
			}

			.home-block {
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 0 30rpx;
				background-color: #FFF7EE;
				margin-bottom: 30rpx;

				.public-title {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12rpx 30rpx;

					.title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
						position: relative;
						padding-left: 20rpx;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 6rpx;
							height: 30rpx;
							background-color: #AC6C17;
							border-radius: 3rpx;
						}
					}

					.more {
						font-size: 26rpx;
						color: #333;
						display: flex;
						align-items: center;
					}
				}
			}

		}
	}
</style>